<template>
  <div>
    <h3>detail---params:{{ type }}</h3>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Detail',
});
</script>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { watch, computed } from 'vue';

/* 
  useRoute
    返回当前路由地址，相当于在模板中使用 $route，必须在 setup() 中调用
    只要动态路由参数发生变化，route对象就会随之改变
*/

const route = useRoute();

// 动态的获取动态路由参数
const type = computed(() => {
  return route.params.type;
});

watch(route, () => {
  console.log('route变了', route.params.type);
});
</script>

<style scoped lang="scss"></style>
